<template>
<div></div>
</template>

<script>
import {reactive, toRef} from "vue";

export default {
  name: "toref",
  mounted() {
    console.log('toref')
    const state = reactive({
      foo: 1,
      bar: 2
    })
    //可以用来为源响应式对象上的某个 property 新创建一个 ref。然后，ref 可以被传递，它会保持对其源 property 的响应式连接。

    const fooRef = toRef(state, 'foo')
    console.log("toRef(state)", toRef(state))
    /**
     * 外面加一层 ref
     * ObjectRefImpl {_object: Proxy, _key: undefined, __v_isRef: true}
     __v_isRef: true
     _key: undefined
     _object: Proxy
     [[Handler]]: Object
     [[Target]]: Object
     bar: 2
     foo: 3
     [[Prototype]]: Object
     [[IsRevoked]]: false
     value: (...)
     [[Prototype]]: Object
     */
    console.log("fooRef",fooRef)
    fooRef.value++
    console.log(state.foo) // 2
    // fooRef 这个变量链接到 state的foo，二者联动，哈哈哈
    state.foo++
    console.log(fooRef.value) // 3
    console.log('toref')

  }
}
</script>

<style scoped>

</style>